<template>
    <div>
        <TableSearch :rp="rp" :options="searchOpt" :search="handleSearch"  />
        <div class="container">
            <TableCustom  
                :columns="columns" 
                :tableData="tableData"
                :rp="rp"
                @update:rp="rp = $event"
                :query-data="queryDataApi"
                :del-data="deleteDataApi"
                :restore-data="restoreDataApi"
            >
                <!-- 顶部按钮 -->
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="handleAdd">新增</el-button>
                </template>
                <!-- 操作 -->
                <template #operation="{ row, index }">
                    <el-button type="warning"  @click="handleView(row)">查看</el-button>
                    <el-button type="primary"  @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger"  @click="handleDelete(row)">删除</el-button>
                </template>
            </TableCustom>
        </div>
    </div>
    <!-- 图标信息弹窗 -->
    <KdDialog 
        v-model="showIcon" 
        :title="openType === 'edit' ? '编辑图标' : openType === 'preview' ? '查看图标' : '添加图标'"
        width="500px"
    >
        <IconInfo 
            :icon="rowData"
            @update:icon="rowData = $event"
            :openType="openType"
        />
        <template #footer>
            <el-button v-if="openType === 'add'" type="primary" @click="addDataApi()">确定</el-button>
            <el-button v-if="openType === 'edit'" type="primary" @click="updateDataApi(rowData)">确定</el-button>
            <el-button @click="showIcon = false">取消</el-button>
        </template>
    </KdDialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import KdDialog from '@/components/kd-dialog.vue';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import {ajax } from '@/api';
import IconInfo from './components/icon-info.vue';
import TableCustom from '@/components/table-custom.vue';
import { FormOptionList } from '@/types/form-option';
import { Icon, createIcon } from '@/pojo/kd-icon';
import {RQ, initRQ, toQParams} from '@/types/rq';
import {RP} from '@/types/rp';
/************************* 控制变量 *******************************/
/**
 * 表格设置
 */
const tableData = ref<any[]>([]);   // 表格数据
const rp = ref<RQ<Icon>>(initRQ());

/**
 * 查询设置
 */
rp.value.where = toQParams([
    { prop: 'status', type: 'eq', value: 0 },
]);

/**
 * 弹窗设置
 */
const showIcon = ref(false);  //控制页面显示状态
const rowData = ref<Icon>();  // 当前行数据对象，用于编辑或查看详情
const openType = ref('add');

/************************* 配置 *******************************/

// 导航搜索配置
const searchOpt = ref<FormOptionList[]>([
    { type: 'input', label: '图标名：', width: "150px", prop: 'name', queryType: 'like' }, 
    { 
        type: 'select', 
        label: '状态', 
        prop: 'status', 
        required: true, 
        width: "100px",
        queryType: 'eq',
        opts: [ 
                { label: '正常', value: 0}, 
                { label: '删除', value: -1}
        ]
    },
]);

// 表头配置
let columns = ref([
    { type: 'index', label: '序号', width: 55, align: 'center' }, // 序号列，固定宽度55px，居中对齐
    { prop: 'url', label: '图标', type: "img",width: 80, imgWidth: "50px",imgHeight: "50px" }, //头像图片
    { prop: 'name', width: 180,label: '图标名称' }, 
    { prop: 'createAt', width: 180,label: '创建时间' },
    { prop: 'updateAt', width: 180,label: '修改时间' },
    { prop: 'operation', width: 250,label: '操作'},
]);


/************************* 点击触发 *******************************/

// 查看详情按钮点击事件处理函数
const handleView = (row: any) => {
    rowData.value = { ...row }; // 将当前行数据赋值给rowData
    openType.value = 'preview';
    showIcon.value = true;
};

// 搜索函数：触发分页重置到第一页
const handleSearch = () => {
  queryDataApi();
};

// 编辑
const handleEdit = (row: any) => {
    rowData.value = { ...row }; // 将当前行数据赋值给rowData
    openType.value = 'edit';
    showIcon.value = true;
};


/*************************  表格的封装方法 *******************************/

// 添加
const handleAdd = () => {
    rowData.value = createIcon(); // 重置表单数据
    openType.value = 'add';
    showIcon.value = true; // 显示弹窗
};

// 删除数据
const handleDelete = (data: any) => {
   deleteDataApi(data.id);// 初始化数据
};


/*************************  Api请求  *******************************/
// 查询
const queryDataApi = async (queryRp?: RQ<Icon>) => {
    const currentRp = queryRp || rp.value;
    ajax({
        url: "icon/list",
        method: 'POST',
        data: currentRp,
        success: (res:RP<Icon>) => {
            if( res.code == 0){
                tableData.value = res.dataList;
                // 更新 RP 中的总数
                rp.value.total = res.total;
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

//添加数据
const addDataApi = async () => {
    ajax({
        url: "icon/add",
        method: 'POST', // 修正参数名称
        data: rowData.value,
        success: (res:RP<Icon>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                queryDataApi(); 
                showIcon.value = false;
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

//修改数据
const updateDataApi = async (data: Icon) => {
    ajax({
        url: "icon/update",
        method: 'POST', // 修正参数名称
        data: data,
        success: (res:RP<Icon>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                queryDataApi(); // 重新获取数据
                showIcon.value = false;
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

//删除数据
const deleteDataApi = async (ids?: number[]) => {
    if(ids){
        rp.value.ids = Array.isArray(ids) ? [...ids] : [ids];
    }
    ajax({
        url: "icon/delete",
        method: 'POST', // 修正参数名称
        data: rp.value,
        success: (res:RP<Icon>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                rp.value.ids = [];
                queryDataApi(); // 重新获取数据
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};

// 恢复数据
const restoreDataApi = async (ids?: number[]) => {
    if(ids){
        rp.value.ids = Array.isArray(ids) ? [...ids] : [ids];
    }
    ajax({
        url: "icon/restore",
        method: 'POST', // 修正参数名称
        data: rp.value,
        success: (res:RP<Icon>) => {
            if( res.code == 0){
                ElMessage.success(res.msg);
                rp.value.ids = [];
                queryDataApi(); // 重新获取数据
            }else{
                ElMessage.error(res.msg);
            }
        }
    });
};
console.log("初始化数据");
queryDataApi();// 初始化数据
</script>

<style scoped></style>